import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import { defDrawerWidth } from '@/defaultSettings';
import { Descriptions, Drawer, Tabs } from 'antd';
import styles from './index.less';
import ProductionwasteList from '@/pages/Company/productionwaste/list';

const { TabPane } = Tabs;

/**
 * 预览视图
 */
class PreviewView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }

  render() {
    const { onClose, visible = false, record } = this.props;
    return (
      <Drawer
        title="智能锁信息预览"
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
      >
        {this.state.activeKey == '1' ? (
          <Descriptions bordered column={2}>
            <Descriptions.Item label="所属企业">{record.ssqiye}</Descriptions.Item>
            <Descriptions.Item label="设备编号">{record.id}</Descriptions.Item>
            <Descriptions.Item label="设备名称">{record.lockName}</Descriptions.Item>
            <Descriptions.Item label="状态">{record.lockState}</Descriptions.Item>
            <Descriptions.Item label="电量">{record.dliang}</Descriptions.Item>
            <Descriptions.Item label="采购时间">{record.buyTime}</Descriptions.Item>
          </Descriptions>
        ) : null}

        {this.state.activeKey == '2' ? (
          <ProductionwasteList companyId={record['id']}></ProductionwasteList>
        ) : null}
      </Drawer>
    );
  }

  handleTabOnChange = key => {
    this.setState({
      activeKey: key,
    });
  };
}

export default PreviewView;
